import React, { useEffect } from 'react';
import Icon from '../Icon';
import AudioAtlas from './AudioAtlas';

interface AudioMediaProps {
	width?: string;
	height?: string;
	iconWidth?: string;
	iconHeight?: string;
	classname?: string;
	iconClassName?: string;
	audioLevel?: number;
	isMuteAudio?: boolean;
}

const AudioMedia = (props: AudioMediaProps) => {
	const { width = '100%', height = '100%', iconHeight = '64px', iconWidth = '64px', classname = '', iconClassName = '', audioLevel = 0, isMuteAudio = false } = props;
	return (
		<div className={`audio-media-container ${classname}`} style={{ width, height }}>
			{/* <div className="audio-icon-container" style={{ width: iconWidth, height: iconHeight }}>
				<div className="circle">
					<Icon classname={`icon-widget-maikefeng ${iconClassName}`}></Icon>
				</div>
			</div> */}
			<AudioAtlas isMuteAudio={isMuteAudio} audioLevel={audioLevel} />
		</div>
	);
};

export default AudioMedia;
